<script lang="ts" setup>
    import { ElMessage, ElMessageBox } from 'element-plus'
    import { onMounted,ref ,reactive} from 'vue';
    import api from '../api'
    import {
  Delete,
  Edit,
  Picture
} from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
    const tableData = ref([]);
onMounted(async ()=>{
    checkData();
})
//编辑
const editObj = ref({});
let dialogFormEdiit = ref(false);
//编辑车辆信息弹出
const openEdit =  (row)=>{
  //将数据存储到editObj上面
  editObj.value.id = row.id;
  editObj.value.name = row.name;
  editObj.value.sex = row.sex;
  editObj.value.phone = row.phone;
  editObj.value.address = row.address;
  editObj.value.role = row.role;
//打开
  dialogFormEdiit.value = true;
}
//保存修改后的数据
const saveEdit = async ()=>{
    let result = await api.edit("api/staff/edit" , editObj.value);
    console.log(result);
    dialogFormEdiit.value = false;
    if(result.code == 200){
      checkData();
          ElMessage({
        type: 'success',
        message: '普天同庆 修改成功！',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '不好意思 更新失败~',
      })
    }
    
  }
//定义存储搜索数据的变量
const checkObj = ref({
  page:1,
  size:4
});
//定义搜索数据的方法
const checkData = async (val)=>{
  if(typeof val == 'number'){
    checkObj.value.page = val;
  }
      //查询数据
      console.log(checkObj.value);//检查是否传入数据
      let result = await api.get("/api/staff/staff" , checkObj.value);
      // result {code , data , message}   data->{list , count}
      //更新页面数据
      tableData.value = result.data.list;
      total.value = result.data.count;
}
const total = ref(90);
//删除确认框 start
const open = (data) => {
  ElMessageBox.confirm(
    '你真的要删除这个员工信息吗？！',
    {
      confirmButtonText: '确定',
      cancelButtonText: '我后悔了',
      type: 'warning',
    }
  )
    .then( async () => {
      console.log(data);
        let result = await api.del("/api/staff/del/" , data);
        if(result.code == 200){
         checkData();
          ElMessage({
        type: 'success',
        message: '错误的决定 删除成功了',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '嘿嘿 删除失败',
      })
    }
        })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '正确的决定！！！',
      })
    })
}

//删除确认框  end
const addObj = ref({
    name:'',
    sex:'',
    phone:'',
    address:'',
    role:''
})
//保存新添加的车辆信息
const addSave = async ()=>{
  let result = await api.add("/api/staff/add",addObj.value);
  if(result.code == 200){
          checkData();
          ElMessage({
        type: 'success',
        message: '666 又来了个新员工',
      })
    }else{
      ElMessage({
        type: 'info',
        message: '可惜！',
      })
    }
    dialogFormVisible.value = false;
    
    
}
const openadd = ()=>{
addObj.value = {};
  dialogFormVisible.value = true;
}
var dialogFormVisible = ref(false);
//添加新车的操作
const visable = ref(false);
const imgUrl = ref({});
const imgObj = ref({});
const upload = function(index,row){
  visable.value = true;
  imgUrl.value = row.imge;
  //显示该用户已经上传的头像
  
  imgObj.id = row.id

}
const handleAvatarSuccess : UploadProps['onSuccess']= function(response,uploadFile){
  console.log(response);
  console.log(uploadFile);
  imgUrl.value = "api"+response.data;
  console.log(response.data)
}

const saveimg = async function(){
  //将文件的地址和id发送到后端保存
  imgObj.imge = imgUrl.value;
  let result = await api.edit("api/staff/staffimg",imgObj);
  visable.value = false;
  location. reload()
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>


<template>
   <div style="display: flex; align-items: center;">
    <el-button type="info" plain @click = "checkData">搜索</el-button>
    <el-form :model="checkObj">
    <el-input v-model="checkObj.name" style="width: 240px" placeholder="请输入员工的姓名部分" />
    <el-button plain @click="openadd" type="primary" round >添加新员工</el-button>
  </el-form>
</div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="address" label="住址" />
      <el-table-column prop="role" label="职位" />
      <el-table-column label="照片" >
        <template #default="scope">
          <div class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px"
      :src="scope.row.imge"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="scope.row.imge"
      :initial-index="0"
      fit="cover"
    />
  </div>
                    </template>
      </el-table-column>
      <el-table-column  label="操作"width="200">
        <template #default = "scope">
          <div class="button-container">
        <el-button plain @click="openEdit(scope.row)" type="primary" :icon="Edit" circle />
        <el-button plain @click="open(scope.row.id)" type="danger" :icon="Delete" circle/>
        <el-button type="primary" @click = "upload(scope.$index,scope.row)":icon = "Picture" circle />
      </div>
    </template>
      </el-table-column>
    </el-table>
    <!--上传照片---->
<el-dialog v-model="visable" title="上传照片" width="500">
  <el-upload
    class="avatar-uploader"
    action="/api/staff/upload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imgUrl" :src="imgUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
  <el-button @click="saveimg" >提交</el-button>
</el-dialog>
<!--上传照片-->
    <!--分页-->
    <el-pagination
  :page-size = "checkObj.size"
  :current-page = "checkObj.page"
   background layout="prev, pager, next" :total="total" @current-change="checkData" />
   <!--分页-->
    <!--编辑弹出框-->
    <el-dialog v-model="dialogFormEdiit" title="编辑车辆信息" width="500">
    <el-form :model="editObj">
      <el-form-item label="ID：" :label-width="formLabelWidth">
        <el-input v-model="editObj.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名：" :label-width="formLabelWidth">
        <el-input v-model="editObj.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别：" :label-width="formLabelWidth">
        <el-select v-model="editObj.sex" placeholder="请选择性别" autocomplete="off">
          <el-option  label = "男" value = "男"    />
          <el-option  label = "女" value = "女"    />
        </el-select>
      </el-form-item>
      <el-form-item label="电话：" :label-width="formLabelWidth">
        <el-input v-model="editObj.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="住址：" :label-width="formLabelWidth">
        <el-input v-model="editObj.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="职位：" :label-width="formLabelWidth">
        <el-input v-model="editObj.role" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormEdiit = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
    <!--编辑弹出框-->
 <!--添加新车的弹出框-->
 <el-dialog v-model="dialogFormVisible" title="添加员工信息" width="500">
    <el-form :model="addObj">
      <el-form-item label="姓名：" :label-width="formLabelWidth">
        <el-input v-model="addObj.name" autocomplete="off" placeholder="请输入姓名"/>
      </el-form-item>
      <el-form-item label="性别：" :label-width="formLabelWidth">
        <el-select v-model="addObj.sex" placeholder="请选择性别" autocomplete="off">
          <el-option  label = "男" value = "男"    />
          <el-option  label = "女" value = "女"    />
        </el-select>
      </el-form-item>
      <el-form-item label="电话：" :label-width="formLabelWidth">
        <el-input v-model="addObj.phone" autocomplete="off" placeholder="请输入电话"/>
      </el-form-item>
      <el-form-item label="地址：" :label-width="formLabelWidth">
        <el-input v-model="addObj.address" autocomplete="off" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item label="职位：" :label-width="formLabelWidth">
        <el-input v-model="addObj.role" autocomplete="off" placeholder="请选择职位" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addSave">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
    <!--添加新车的弹出框-->
  </template>
  
  
  
  <style>
  .el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
  .button-container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-around; /* 按钮之间的间距平均分布 */
  align-items: center; /* 垂直居中对齐 */
}
.el-table {
    --el-table-border-color: transparent;
    --el-table-border: none;
    --el-table-text-color: #000000;
    --el-table-header-text-color: #0b0b0b;
    --el-table-row-hover-bg-color: transparent;
    --el-table-current-row-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-tr-bg-color: transparent;
    --el-table-expanded-cell-bg-color: transparent;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.demo-image__preview{
  
  height: 100px;
}
  </style>
  <style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>